
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<span style="font-size:18px;">
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="weddingPhotography/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="weddingPhotography/css/commonly-used-show.css" />
    <script type="text/javascript" src="weddingPhotography/js/jquery.min.js"></script>
    <script type="text/javascript" src="weddingPhotography/js/bootstrap.js" ></script>

    <c:if test="${user_leve == 0}">
        <title>添加图片</title>
    </c:if>

    <c:if test="${user_leve == 2}">
        <title>上传照片</title>
    </c:if>


    <style>
        .photodiv{
            border: 1px solid black;
            margin: 30px auto;
            height: 700px;
            padding: 20px;
            border-radius: 5px;
        }
    </style>

</head>

<body class="mybody">

<c:if test="${user_leve == 0}">
    <jsp:include page="theTopMenuAdmin.jsp" />
</c:if>

<c:if test="${user_leve == 2}">
    <jsp:include page="theTopMenuUser.jsp" />
</c:if>

<div class="container">
    <div class="photodiv">
        <c:if test="${user_leve == 0}">
            <h3 style="text-align: center">上传图片</h3>
        </c:if>

        <c:if test="${user_leve == 2}">
            <h3 style="text-align: center">上传照片</h3>
        </c:if>

        <hr style="filter: alpha(opacity=100,finishopacity=0,style=3)" width="100%" color="#6f5999" size="3"/>

        <div style="margin-left: 10%; margin-right: 10%; ">

            <div class="form-group" style="float: left">
                <img id="image1" src="weddingPhotography/img/uploadly.png" width="400px" height="400px" >
            <br></br>
            <input type="file" onChange="selectImage(this)" />
            </div>

            <div class="form-group" style="float: left; margin-left: 100px;">
                <c:if test="${user_leve == 0}">
                    <label>选择作品分类：</label>
                </c:if>

                <c:if test="${user_leve == 2}">
                    <label>选择存放的文件夹：</label>
                </c:if>
                <select style="font-size:14px" id="selectlink" class="form-control edit" title="请选择" data-live-search="true">
                    <option value="" disabled selected hidden>请选择</option>
                </select>
            </div>
        </div>


        <div class="text-center same-line-clear" style="margin-top: 520px">
            <div class="form-group">
                <input type="button" value="确认上传" class="btn btn-primary" onclick="present()">
            </div>

            <div>
                <label id="user_null" style="color: red"></label>
            </div>
        </div>

    </div>
</div>

<script type="text/javascript">
    var userdt = JSON.parse(sessionStorage.getItem("user"));
    var userNull = document.getElementById("user_null");
    var picture = "";
    var graphic;
    if (userdt.result.userName != null){
        $("#usname").text(userdt.result.userName);
    }else {
        $("#usname").text(userdt.result.userLoginName);
    }
    var moledType;

    window.onload = function(){
        menuInfo();
    }

    function menuInfo(){
        var postUrl = "${pageContext.request.contextPath}/member/selectMenusIdAll";
        var str = {
            "userId": userdt.result.id
        };

        $.ajax({
            type:"post",
            url:postUrl,
            headers: {
                "Content-Type":"application/json"
            },
            data:JSON.stringify(str),
            contentType: "application/json; charset=utf-8",
            dataType:"json",
            success:function(data){
                if (data.status == "0"){
                    userNull.innerHTML = data.msg;
                }else {
                    for (var i = 0; i < data.result.length; i++){
                        $("#selectlink").append("<option value=" + "'" + data.result[i].moduleName + "'>" + data.result[i].moduleName + "</option>" );
                    }
                }

            },
            error:function(xhr,state,errorThrown){
                //alert("发生网络错误，错误码为：" + xhr.status)
                location.href = "${pageContext.request.contextPath}/error";
            }
        });
    }

    function present(){
        moledType = $("#selectlink").val();

        if ($.isEmptyObject(graphic)){
            userNull.innerHTML = "获取本地图片数据失败";
            return false;
        }else if ($.isEmptyObject(moledType)){
            userNull.innerHTML = "获取图片类型失败";
            return false;
        } else {
            userNull.innerHTML = "";
        }

        var postUrl = "${pageContext.request.contextPath}/uploadFile";
        var formData = new FormData();
        formData.append("userId",userdt.result.createUserId);
        formData.append("pictureUrl",graphic);    //生成一对表单属性
        $.ajax({
            type: "post",           //因为是传输文件，所以必须是post
            url: postUrl,         //对应的后台处理类的地址
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
                if (data.status == "0"){
                    userNull.innerHTML = data.msg;
                }else {
                    mypicture(data.result);
                }
            },
            error:function(xhr,state,errorThrown){
                //alert("发生网络错误，错误码为：" + xhr.status)
                location.href = "${pageContext.request.contextPath}/error";
            }
        });

    }


    function mypicture(mypicture){
        if ($.isEmptyObject(mypicture)){
            userNull.innerHTML = "获取图片数据失败";
            return false;
        }else {
            userNull.innerHTML = "";
        }

        var postUrl = "${pageContext.request.contextPath}/member/addPhoto";
        var str = {
            "userId": userdt.result.id,
            "userLevel": userdt.result.userLevel,
            "pictureTitle": mypicture.pictureTitle,
            "pictureUrl": mypicture.pictureUrl,
            "moduleName": moledType,
            "createTime": mypicture.createTime
        };

        $.ajax({
            type:"post",
            url:postUrl,
            headers: {
                "Content-Type":"application/json"
            },
            data:JSON.stringify(str),
            contentType: "application/json; charset=utf-8",
            dataType:"json",
            success:function(data){
                if (data.status == "0"){
                    userNull.innerHTML = data.msg;
                }else {
                    if ("${user_leve}" == 0){
                        location.href = "${pageContext.request.contextPath}/adminWorksAppreciation";
                    }else {
                        location.href = "${pageContext.request.contextPath}/myPictureFile";
                    }

                }

            },
            error:function(xhr,state,errorThrown){
                //alert("发生网络错误，错误码为：" + xhr.status)
                location.href = "${pageContext.request.contextPath}/error";
            }
        });
    }


    function selectImage(file) {
        if (!file.files || !file.files[0]) {
            return;
        }
        var reader = new FileReader();
        reader.onload = function (evt) {
            document.getElementById("image1").src = evt.target.result;
            picture = evt.target.result;
        }
        //通过文件流将文件转换成Base64字符串
        reader.readAsDataURL(file.files[0]);
        graphic = file.files[0];
    }


</script>

</body>
</html>
</span>